<script setup lang="ts">
import { pwEditApi } from "@/api/System/user";
import { notify } from "@/utils/anted";
import { Modal, Form, FormItem, Input, Switch, Textarea } from "ant-design-vue";
import { reactive } from "vue";

// 定义状态
const state = reactive({
  visible: false,
  title: "新增",
  type: "add",
});

const useForm = Form.useForm;
const modelStateRef = reactive({
  id: "",
  status: "",
  remark: "",
  sort: "",
  label: "",
  value: "",
  dictType: "",
});
const rulesRef = reactive({
  dictType: [
    {
      required: true,
      message: "请输入字典类型",
    },
  ],
  label: [
    {
      required: true,
      message: "请输入数据标签",
    },
  ],
  value: [
    {
      required: true,
      message: "请输入键值",
    },
  ],
  sort: [
    {
      required: true,
      message: "请输入显示排序",
    },
  ],
});
const { validate, validateInfos, resetFields } = useForm(
  modelStateRef,
  rulesRef
);
const onSubmit = () => {
  validate()
    .then(async () => {
      await pwEditApi("");
      notify("密码重置成功！", { type: "success" });
      state.visible = false;
    })
    .catch((err) => {
      console.log("error", err);
    });
};
const open = (type: any, title: any, row: any) => {
  console.log("row", row);
  state.title = title;
  state.type = type;
  state.visible = true;
  if (type === "add") {
    modelStateRef.dictType = row.dictType;
  } else {
    modelStateRef.label = row.label;
    modelStateRef.value = row.value;
    modelStateRef.sort = row.sort;
    modelStateRef.dictType = row.dictType;
    modelStateRef.status = row.status;
    modelStateRef.remark = row.remark;
    modelStateRef.id = row.id;
  }
};
// 导出给父组件调用
defineExpose({
  open,
});
</script>
<template>
  <Modal
    v-model:open="state.visible"
    :title="state.title"
    @ok="onSubmit"
    destroyOnClose
    @cancel="resetFields"
  >
    <Form>
      <FormItem
        label="字典类型"
        :labelCol="{ style: 'width: 80px' }"
        v-bind="validateInfos.dictType"
      >
        <Input
          v-model:value="modelStateRef.dictType"
          :disabled="true"
          placeholder="请输入字典类型"
        />
      </FormItem>
      <FormItem
        label="数据标签"
        :labelCol="{ style: 'width: 80px' }"
        v-bind="validateInfos.label"
      >
        <Input
          v-model:value="modelStateRef.label"
          placeholder="请输入数据标签"
        />
      </FormItem>
      <FormItem
        label="数据键值"
        :labelCol="{ style: 'width: 80px' }"
        v-bind="validateInfos.value"
      >
        <Input
          v-model:value="modelStateRef.value"
          placeholder="请输入数据标签"
        />
      </FormItem>
      <FormItem
        label="显示排序"
        :labelCol="{ style: 'width: 80px' }"
        v-bind="validateInfos.sort"
      >
        <Input
          v-model:value="modelStateRef.sort"
          placeholder="请输入显示排序"
        />
      </FormItem>
      <FormItem
        label="状态"
        :labelCol="{ style: 'width: 80px' }"
        v-bind="validateInfos.status"
      >
        <Switch
          checked-children="启"
          un-checked-children="停"
          v-model:checked="modelStateRef.status"
        />
      </FormItem>
      <FormItem
        label="备注"
        :labelCol="{ style: 'width: 80px' }"
        v-bind="validateInfos.remark"
      >
        <Textarea
          v-model:value="modelStateRef.remark"
          placeholder="请输入字典类型"
        />
      </FormItem>
    </Form>
  </Modal>
</template>

<style scoped></style>
